<template>
  <div class="wrap-box">
    <span class="title-text">{{data.titleText}}</span><br>
    <span class="status"
          :style="data.statusStyle">{{data.status}}</span>
    <span class="locate">{{data.locate}}</span>
    <div class="bottom-box">
      <div class="img-box">
        <img :src=this.data.imgUrl
             class="pic-img">
      </div>
      <div class="btn-box">
        <van-button icon="filter-o"
                    :color="data.iconColor"
                    round
                    size="small"
                    @click="changeIcon" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartItem',
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    changeIcon () {
      if (this.data.iconColor === '#71cacd') {
        this.data.iconColor = '#999'
        this.data.status = '未开启'
        this.data.statusStyle = 'color:#999;border: solid 1px #999;'
      } else {
        this.data.iconColor = '#71cacd'
        this.data.status = '已开启'
        this.data.statusStyle = 'color:#71cacd;border: solid 1px #18cfd5;'
      }
    }
  }
}
</script>
<style scoped>
.wrap-box {
  width: 165px;
  height: 110px;
  padding-left: 15px;
  border-radius: 15px;
  font-size: 16px;
  background-color: rgba(238, 238, 238, 0.808);
  z-index: 999;
}
.title-text {
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
}
.bottom-box {
  position: relative;
}
.img-box {
  display: inline-block;
  position: absolute;
  width: 40px;
  height: 50px;
}
.pic-img {
  width: 100%;
  height: 100%;
}
.btn-box {
  display: inline-block;
  position: absolute;
  left: 105px;
  top: 10px;
}
.status {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  border: solid 1px#999;
  border-radius: 8px;
}
.locate {
  font-size: 14px;
}
</style>
